<template>
  <div class="main">
    <div class="header">
      <span class="title">详情</span>
      <span class="iconfont icon-guanbi" @click="$emit('closeSidebar')"></span>
    </div>
    <div class="note" :style="{ backgroundColor: messageColors[message.color] }">
      <div class="top">
        <div class="top-left">{{ dayjs(message.created_at).format('YYYY.MM.DD HH:mm') }}</div>
        <div class="top-right">{{ tags[message.tag] }}</div>
      </div>
      <div class="content">
        {{ message.content }}
      </div>
      <div class="bottom">
        <div class="bottom-left">
          <span class="iconfont icon-aixin" :class="{ active: isLike }" @click="handleLike"></span>
          <span>{{ message.likes_num }}</span>
          <span class="iconfont icon-liuyan"></span>
          <span>{{ message.comments_num }}</span>
        </div>
        <div class="bottom-right">{{ message.author }}</div>
      </div>
    </div>
    <div class="add-comment">
      <textarea placeholder="请输入..." maxlength="96" v-model="comment"></textarea>
      <input type="text" placeholder="签名" v-model="sign">
      <el-button :disabled="!(comment && sign)" @click="submitCreateComment">评论</el-button>
    </div>
    <div class="comments">
      <span class="title">评论</span>
      <span class="number">{{ message.comments && message.comments.length }}</span>
      <ul class="comments-detail">
        <li v-for="comment in message.comments" :key="comment.comment_id">
          <img src="../assets/touxiang-01.svg" class="avatar">
          <div class="right">
            <div class="name-time">
              <span class="name">{{ comment.commenter }}</span>
              <span class="time">{{ dayjs(comment.comment_time).format('YYYY.MM.DD HH:mm') }}</span>
            </div>
            <div class="detail">{{ comment.comment_content }}</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watch, computed } from 'vue'
import type { PropType } from 'vue'
import type { MessageType, CommentType } from '../store/messages'
import { useMessagesStore } from '../store/messages'
import { useUserStore } from '../store/user'
import { tags, messageColors } from './Wall.vue'
import dayjs from 'dayjs'
import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'

export default defineComponent({
  props: {
    message: {
      type: Object as PropType<MessageType>,
      required: true
    }
  },
  emits: ['closeSidebar'],
  setup(props) {
    // 评论内容
    const comment = ref('')
    // 签名
    const sign = ref('')

    const userStore = useUserStore()
    const messagesStore = useMessagesStore()

    // 组件挂载时，向服务器发起请求，请求返回该留言的评论信息
    onMounted(async () => {
      if (props.message.comments) return
      await messagesStore.fetchComments(props.message.message_id!)
    })
    // 当展示的留言发生变化时，重新向服务器发送请求
    watch(() => props.message.message_id, async () => {
      if (props.message.comments) return
      await messagesStore.fetchComments(props.message.message_id!)
    })

    // 新建评论
    const submitCreateComment = async () => {
      const newComment: CommentType = {
        comment_content: comment.value,
        comment_time: Date.now(),
        commenter: sign.value,
        message_id: props.message.message_id!
      }
      comment.value = ''
      sign.value = ''
      const result = await messagesStore.createComment(newComment)
      if (result) {
        ElMessage({
          showClose: true,
          message: '评论成功',
          type: 'success',
          duration: 1000
        })
      } else {
        ElMessage({
          showClose: true,
          message: '请登录之后再进行操作',
          type: 'warning',
          duration: 1000
        })
      }
    }

    const isLike = computed(() => {
      return userStore.user.likes.includes(props.message.message_id!)
    })
    const handleLike = async () => {
      if (!userStore.user.isLogin) {
        ElMessage({
          showClose: true,
          message: '请登录之后再进行操作',
          type: 'warning',
          duration: 1000
        })
        return
      }
      await messagesStore.handleLike({
        username: userStore.user.username,
        message_id: props.message.message_id!,
        isLike: isLike.value
      })
      if (isLike.value) {
        ElMessage({
          showClose: true,
          message: '感谢你的小红心💗',
          duration: 1000
        })
      } else {
        ElMessage({
          showClose: true,
          message: '呜呜呜🥹',
          duration: 1000
        })
      }
    }

    return { dayjs, tags, comment, sign, messageColors, submitCreateComment, isLike, handleLike }
  }
})
</script>

<style scoped lang="less">
.main {
  padding: 20px;

  .header {
    font-size: 16px;
    color: #202020;
    font-weight: 600;
    display: flex;
    justify-content: space-between;

    .icon-guanbi {
      cursor: pointer;
    }
  }

  .note {
    width: 100%;
    height: 240px;
    background: rgba(168, 237, 138, 0.3);
    padding: 10px 20px 16px;
    box-sizing: border-box;
    margin-top: 20px;
    border-radius: 10px;

    .top {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #949494;
    }

    .content {
      margin: 19px 0 18px;
      height: 140px;
      text-align: justify;
      line-height: 22px;
    }

    .bottom {
      display: flex;
      justify-content: space-between;

      .bottom-left {

        span {
          color: #7E7E7E;
          margin: 0 2px;

          &.icon-aixin {
            transition: all .3s;
            cursor: pointer;

            &.active {
              color: #f67770;
            }

            &:hover {
              color: #f67770;
            }
          }
        }
      }

      .bottom-right {
        font-weight: 700;
      }
    }
  }

  .add-comment {
    margin-top: 20px;

    textarea {
      width: 100%;
      height: 56px;
      padding: 8px;
      resize: none;
      border: 1px solid #949494;
      line-height: 1.5;
      box-sizing: border-box;
      border-radius: 5px;
      background-color: transparent;

      &:focus {
        border: 1px solid #202020;
      }
    }

    input {
      width: 70%;
      border: 1px solid #949494;
      padding: 8px;
      box-sizing: border-box;
      height: 36px;
      margin-right: 20px;
      border-radius: 5px;
      background-color: transparent;

      &:focus {
        border: 1px solid #202020;
      }
    }
  }

  .comments {
    margin-top: 20px;

    .title {
      font-weight: 600;
      margin-right: 10px;
    }

    .number {
      font-weight: 600;
    }

    .comments-detail {
      margin-top: 20px;

      li {
        display: flex;
        margin-bottom: 20px;

        .avatar {
          width: 36px;
          height: 36px;
          border-radius: 50%;
        }

        .right {
          margin-left: 10px;

          .name-time {
            margin-bottom: 10px;

            .name {
              font-weight: 600;
              margin-right: 10px;
            }

            .time {
              font-size: 12px;
              color: #949494;
            }
          }
        }
      }
    }
  }
}
</style>